<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .user-info {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 10px;
            background-color: #eee;
        }
        
        .user-info span {
            margin-right: 10px;
        }
        .left-btn {
            margin-right: auto;
        }
        .btn {
            padding: 5px 10px;
            background-color: #ccc;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>招投标管理系统</h1>
    </div>

    <div id="app">

        <div class="user-info">
            <div class="left-btn">
            <el-button type="primary" @click="manufacturer_click" class="btn">机电设备厂家详情</el-button>
            <el-button type="primary" @click="unit_click" class="btn">招标单位详情</el-button>
            <el-button type="primary" @click="message_click" class="btn">留言板</el-button>
            </div>
            <span>欢迎您：{{ currentUser }}</span>
            <el-button type="danger" @click="logout">退出</el-button>
        </div>

        <h2 style="text-align: center">招标单位信息管理</h2>
        <template>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName">
              <el-table-column
                type="index"
                width="120">
              </el-table-column>
              <el-table-column
              prop="id"
              label="招标单位编号"
              width="180">
            </el-table-column>
              <el-table-column
                prop="companyName"
                label="公司名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="法人"
                width="180">
              </el-table-column>
              <el-table-column
                prop="tel"
                label="联系电话">
              </el-table-column>

              <el-table-column
                prop="price"
                label="注册资本">
              </el-table-column>

              <el-table-column>
                <template slot-scope="scope">
                    <el-button type="danger" @click="editInfo(scope.row)">修改</el-button>
                    <el-button type="danger" @click="deleteInfo(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
        </template>

        <!-- 招标单位信息修改栏 -->
        <el-dialog title="招标单位信息管理" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="公司名称" :label-width="formLabelWidth">
                <el-input v-model="form.companyName" autocomplete="off"></el-input>
                </el-form-item>
    
                <el-form-item label="法人" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
    
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                    <el-input v-model="form.tel" autocomplete="off"></el-input>
                </el-form-item>
    
                <el-form-item label="注册资本" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateInfo">确 定</el-button>
            </div>
        </el-dialog>
        
    </div>


    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>    
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

    <script>
        new Vue({
            el:"#app",
            mounted(){
                this.first();
                this.selectUnit();
            },
            data() {
                return {
                    currentUser: "",
                    tableData: [],
                    form: {
                        companyName:'',
                        name: '',
                        tel: '',
                        price: '',
                    },
                    dialogFormVisible:false,

                }
            },
            methods: {
              first(){
                    var _this = this;
                    $.ajax({
                        method:'get',
                        url:'userInfo',
                        success:function(resp){
                            _this.currentUser=resp.companyName;
                        }
                    })
              },
              selectUnit(){
                    var _this = this;
                    $.ajax({
                        method:'get',
                        url:'unitInfo',
                        success:function(resp){
                            _this.tableData=resp;
                        }
                    })
              },
              updateInfo() { 
                var _this = this;
                    // 修改数据
                    $.ajax({
                            method:'post',
                            url:'/update',
                            data:{
                                id: this.selectedRow.id, // 根据实际情况传递选中行的唯一标识符
                                companyName: this.form.companyName,
                                name: this.form.name,
                                tel: this.form.tel,
                                price: this.form.price,
                            },
                            success:function(data){
                                if(data != 0){
                                    alert("修改成功");
                                    _this.selectUnit();
                                    _this.dialogFormVisible = false;
                                }else{
                                    alert("修改失败")
                                }
                            },
                        });
                },
              editInfo(row) {
                    this.selectedRow = row; // 保存选中行的数据
                    this.form.companyName = row.companyName;
                    this.form.name = row.name;
                    this.form.tel = row.tel;
                    this.form.price = row.price;
                    this.dialogFormVisible = true; // 打开修改对话框
              },
              deleteInfo(row){
                    var _this = this;
                    this.selectedRow = row; // 保存选中行的数据
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 发送请求删除数据
                        $.ajax({
                        method:'post',
                        url: "delete",
                        data: {
                            id: row.id, // 根据实际情况传递选中行的唯一标识符
                        },
                        success:function(data){
                            if(data != 0){
                                alert("删除成功");
                                _this.selectUnit();   
                            }
                            else{
                                alert("删除失败")
                            }
                        },
                        })
                    })
                    
              },
              manufacturer_click(){
                location.replace("admin.html");
              },
              unit_click(){
                location.replace("admin_unit.html");
              },
              message_click(){
                location.replace("admin_message.html");
              },
              logout(){
                    $.ajax({
                        method:'post',
                        url:'logout',
                        success:function(resp){
                            alert("退出成功！");
                        }
                    })
                    location.replace("/index.html");
              },
              tableRowClassName({row, rowIndex}) {
                  if (rowIndex === 1) {
                  return 'warning-row';
                  } else if (rowIndex === 3) {
                  return 'success-row';
                  }
                  return '';
              },

            },
        })
    </script>
</body>
</html>